'use client'

import { useState } from 'react'

const timeline = [
  {
    year: '2019',
    title: '公司成立',
    description: '专注大家居行业数字化营销服务'
  },
  {
    year: '2020',
    title: '产品研发',
    description: '完成首个AI智能营销系统开发'
  },
  {
    year: '2021',
    title: '市场拓展',
    description: '服务客户突破50家，覆盖全国主要城市'
  },
  {
    year: '2022',
    title: '技术升级',
    description: '推出行业首个AI智能体解决方案'
  },
  {
    year: '2023',
    title: '规模扩张',
    description: '服务品牌超100个，终端门店突破10000家'
  },
  {
    year: '2024',
    title: '生态完善',
    description: '构建完整的大家居AI数字营销生态体系'
  }
]

const certificates = [
  { name: '高新技术企业认证', icon: '🏆' },
  { name: 'ISO9001质量管理体系', icon: '📜' },
  { name: '软件著作权证书', icon: '💻' },
  { name: '数据安全认证', icon: '🔒' },
  { name: 'AI技术专利证书', icon: '🧠' },
  { name: '服务质量认证', icon: '⭐' }
]

const partnerships = [
  { name: '清华大学', type: '科研合作' },
  { name: '中科院', type: '技术研发' },
  { name: '阿里云', type: '云服务' },
  { name: '华为云', type: '基础设施' },
  { name: '腾讯云', type: 'AI能力' },
  { name: '百度AI', type: '算法优化' }
]

export default function AboutUsSection() {
  const [hoveredYear, setHoveredYear] = useState<string | null>(null)

  return (
    <section id="about" className="py-20 bg-white dark:bg-black">
      <div className="max-w-7xl mx-auto px-6">
        {/* 标题 */}
        <div className="text-center mb-16">
          <h2 className="text-5xl md:text-6xl font-black text-black dark:text-white mb-6">
            关于蜜多云科技
          </h2>
          <p className="text-2xl font-medium text-gray-600 dark:text-gray-400">
            专注大家居行业，引领AI数字营销变革
          </p>
        </div>

        {/* 使命愿景 */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-20">
          <div className="neo-brutal-card p-8">
            <h3 className="text-3xl font-black text-black dark:text-white mb-4">我们的使命</h3>
            <p className="text-lg text-gray-600 dark:text-gray-400 leading-relaxed">
              让AI智能体懂企业的业务，通过先进的人工智能技术，为大家居行业提供最专业、最智能的数字营销解决方案，助力每一个企业实现数字化转型和业务增长。
            </p>
          </div>
          
          <div className="neo-brutal-card p-8">
            <h3 className="text-3xl font-black text-black dark:text-white mb-4">我们的愿景</h3>
            <p className="text-lg text-gray-600 dark:text-gray-400 leading-relaxed">
              成为大家居行业AI数字营销的领导者，构建行业最完善的AI智能营销生态体系，让每一个大家居企业都能享受到AI技术带来的营销红利。
            </p>
          </div>
        </div>

        {/* 发展时间线 */}
        <div className="mb-20">
          <h3 className="text-4xl font-black text-center text-black dark:text-white mb-12">发展历程</h3>
          
          <div className="relative">
            {/* 时间线主轴 - 降低层级确保不遮挡数字 */}
            <div className="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-blue-600 z-0"></div>
            
            <div className="space-y-8 relative z-10">
              {timeline.map((item, index) => (
                <div
                  key={item.year}
                  className={`flex items-center ${index % 2 === 0 ? 'flex-row' : 'flex-row-reverse'}`}
                  onMouseEnter={() => setHoveredYear(item.year)}
                  onMouseLeave={() => setHoveredYear(null)}
                  data-cursor-text="reveal"
                >
                  <div className={`w-5/12 ${index % 2 === 0 ? 'text-right pr-8' : 'text-left pl-8'}`}>
                    <div className={`
                      neo-brutal-card p-6 transition-all duration-300
                      ${hoveredYear === item.year ? 'bg-blue-600 text-white' : ''}
                    `}>
                      <h4 className="text-2xl font-bold mb-2">{item.title}</h4>
                      <p className="text-lg">{item.description}</p>
                    </div>
                  </div>
                  
                  {/* 时间节点 - 提高层级确保在线条上方 */}
                  <div className="w-2/12 flex justify-center relative z-20">
                    <div className={`
                      w-16 h-16 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold text-lg border-4 border-white dark:border-black shadow-lg relative
                      ${hoveredYear === item.year ? 'scale-125 bg-green-400' : ''}
                      transition-all duration-300
                    `}>
                      {item.year.slice(-2)}
                    </div>
                  </div>
                  
                  <div className="w-5/12"></div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* 技术实力 */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
          {/* 技术证书 */}
          <div>
            <h3 className="text-4xl font-black text-black dark:text-white mb-8">技术认证</h3>
            <div className="grid grid-cols-2 gap-4">
              {certificates.map((cert, index) => (
                <div
                  key={index}
                  className="neo-brutal-card p-4 text-center group"
                  data-cursor-text="view"
                >
                  <div className="text-3xl mb-2 group-hover:animate-bounce">
                    {cert.icon}
                  </div>
                  <p className="font-medium text-sm">{cert.name}</p>
                </div>
              ))}
            </div>
          </div>
          
          {/* 合作伙伴 */}
          <div>
            <h3 className="text-4xl font-black text-black dark:text-white mb-8">科研合作</h3>
            <div className="space-y-4">
              {partnerships.map((partner, index) => (
                <div
                  key={index}
                  className="flex items-center justify-between p-4 border-l-4 border-green-400 bg-gray-50 dark:bg-gray-800"
                  data-cursor-text="view"
                >
                  <span className="font-bold text-lg">{partner.name}</span>
                  <span className="text-sm text-gray-600 dark:text-gray-400 font-mono bg-blue-100 dark:bg-blue-900 px-2 py-1">
                    {partner.type}
                  </span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
} 